前端那些事

vuePress-theme-reco chenpeng    2020 - 2021
前端那些事 前端那些事

Choose mode

  • dark
  • auto
  • light
首页
文章目录
  • Browser
  • CSS
  • ES6
  • JavaScript
  • Network
  • TypeScript
  • Vue
  • Vue3
  • Webpack
标签
时间轴
GitHub
author-avatar

chenpeng

85

Article

25

Tag

首页
文章目录
  • Browser
  • CSS
  • ES6
  • JavaScript
  • Network
  • TypeScript
  • Vue
  • Vue3
  • Webpack
标签
时间轴
GitHub
  • ES6-基础

    • let、const 和 var的概念与区别
    • 对象的解构赋值
    • Symbol概念及其作用
    • Iterator 和 for..of
    • 循环语法比较及使用场景(for、forEach、for...in、for...of)

Iterator 和 for..of

vuePress-theme-reco chenpeng    2020 - 2021

Iterator 和 for..of

chenpeng 2020-11-30 ES6基础

# 1.Iterator

Iterator 是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署了 Iterator 接口,就可以完成遍历操作

原生具备 Iterator 接口的数据结构:

  1. Array
  2. Map
  3. Set
  4. String
  5. TypedArray
  6. arguments
  7. NodeList

Iterator 的作用:

  1. 为各种数据结构,提供一个统一的访问接口
  2. 使数据结构的成员能够按某种顺序排列
  3. ES6 创造了新的遍历命令 for...of,Iterator 主要供 for...of 消费

Iterator 的遍历过程:

  1. 创建一个指针对象,指向数据结构的起始位置(遍历器对象本质上是一个指针对象)
  2. 第一次调用指针对象的 next 方法,将指针指向数据结构的第一个成员
  3. 第二次调用指针对象的 next 方法,将指针指向数据结构的第二个成员
  4. 不断调用指针对象的 next 方法,直到指针指向数据结构的结束位置

Iterator 遍历器实现:

function makeIterator(array){
    let index = 0;
    return{
        next(){
            return index < array.length ? 
                {value: array[index++], done: false} : {value: undefined, done: true}
        }
    }
}
1
2
3
4
5
6
7
8
9

# 2.for...of

任何数据结构只要部署了 Iterator 接口,就可以使用 for...of 遍历它的成员